<template>
<el-row :gutter="20" style="margin:0;">
  <el-col :span="12" :offset="4" style="padding:0;">
      <div> 
     <!-- 展示文章 -->
  <div class="show_article" v-for="item in articleList.slice((currentPage-1)*pagesize,currentPage*pagesize)" :key="item.a_desc">
      <h2>{{item.a_title}}</h2>
      
      <span>{{adminName}}</span>
      <el-divider direction="vertical"></el-divider>
      <span>{{item.a_updatedat | moment}}</span>
        <br>
      <div>{{item.a_desc}}</div>
    <div @click="content(item.id)" class="read_more">阅读更多</div>
    

  </div>
   
   <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="pagesizes"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="articleList.length">
    </el-pagination>

    
</div>
  </el-col>
  <!-- 推荐文章 -->
    <el-col :span="8"><div class="grid-content bg-purple">
        <h3 class="hot_article">推荐文章</h3>
        
        <div  class="hot_article_list" v-for="item in articleList.slice((currentPage-1)*pagesize,currentPage*pagesize)" :key="item.a_desc">
            <i class="el-icon-share"></i>
            <span @click="content(item.id)">{{item.a_title}}</span>
        </div>
    </div></el-col>
</el-row>

</template>

<script>
export default {
    
        data(){
            return{
                adminName:localStorage.getItem('adminName'),
                adminLastLoginAt:localStorage.getItem('adminLastLoginAt'),
                pagesize:2,
                pagesizes:[2,4,6,8],
                currentPage:1,
                articleList:[],
                catee:[],
                a_title:""
               
                
        }},
        created(){
            this.getcate().then(()=>{
                this.getAllArticle()
            })
        },
        
        watch: {
            '$route.params.id': function(){
                this.getcate().then(()=>{
                    this.getAllArticle()
                })
            }
        },
        methods:{
            getAllArticle(){
                
                this.$axios.get("/article/all").then(res=>{  
                    if(this.$route.path == "/index"){
                        this.articleList = res.data
                    }else{
                        let arr = []
                        // console.log(this.catee[0])
                        arr = res.data.filter(item=>item.a_cate == this.catee[0].c_name)
                    
                        this.articleList = arr
                        
                    }
                        // res.data.filter(item=>item.a_cate == )
                
            })
            
            },
            getcate(){
                return new Promise(resolve=>{
                        this.$axios.get("/cate/all").then(res=>{
                        this.catee = res.data.filter(item=>item.id == this.$route.params.id)
                        // console.log(this.catee)
                        resolve()
                    }) 
                })
            },
            content(id){
                this.$router.push("/article/"+id)   
            },      
            handleSizeChange(val) {
                this.pagesize = val      
            },
            handleCurrentChange(val) {
                this.currentPage = val
            }  
        }
}
</script>

<style scoped>

h2 { margin:0;  width:400px; color:#409eff; font:normal 36px/1.2em Arial, Helvetica, sans-serif; letter-spacing:-2px;}
.show_article div{
    padding-top: 10px;
}
.show_article{
    /* height: 200px; */
    padding-top: 60px;
}
h3{
    margin: 0;
    padding: 0;
}
.el-row{
    margin-left: 0;
    margin-right: 0;
}
.hot_article{
    padding-top: 60px;
}
.hot_article_list{
    padding-top: 5px;
    line-height: 26px;
    position: relative;
}
.hot_article_list span{
    position: absolute;
    top: 5px;
    left: 24px;
}
.read_more{
    color:#409eff;
}
</style>